<template>
    <div class="profileBox">
        <h1>{{ modelData.model.name }}</h1>
        <div class="detailsBox">
            <div class="introImage">
                <img :src="modelData.model.headImage" alt="">
            </div>
            <div class="messagesBox">
                <span>Height: {{ modelData.model.height }}</span>
                <span>Bust: {{ modelData.model.bust }}</span>
                <span>Waist: {{ modelData.model.waist }}</span>
                <span>Hips: {{ modelData.model.hips }}</span>
                <span>Shoes: {{ modelData.model.shoes }}</span>
            </div>
        </div>
        <div class="work-intro">
            <div class="title">
                <span class="title-text"><span>×</span></span>
            </div>


        </div>
        <div class="images">
            <img v-for="item in modelData.images" :src="item.imageUrl" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">
import { getModelDetailsAPI } from '@/apis/user';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter()
const route = useRoute()

const modelData = ref({
    "model": {
        "id": 1,
        "name": "Anna",
        "headImage": "https://model-project3.oss-cn-guangzhou.aliyuncs.com/7d97b6fa-71ec-41f3-b463-86d90ed90b07.jpg",
        "sex": 1,
        "height": "170cm / 5′ 7”",
        "bust": "78cm / 30½”",
        "waist": "58cm / 23”",
        "hips": "86cm / 34”",
        "hair": "ipsum",
        "eyes": null,
        "shoes": "38EU / 7US / 5UK"
    },
    "images": [
        {
            "id": 1,
            "modelId": 1,
            "imageUrl": "https://model-project3.oss-cn-guangzhou.aliyuncs.com/7d97b6fa-71ec-41f3-b463-86d90ed90b07.jpg"
        }
    ]
})

const getModelDetails = async () => {
    const res = await getModelDetailsAPI(parseInt(route.params.id as string))

    if (res.data.code === 200) {
        modelData.value = res.data.data
    }
}

onMounted(() => {
    getModelDetails()
})
</script>

<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1280px) {}

@media (max-width: 768px) {
    .profileBox {

        .detailsBox {
            flex-direction: column;

            .introImage {
                width: 100% !important;
            }

            .messagesBox span {
                font-size: 20px !important;
            }

            img {
                max-width: 100% !important;
            }
        }

        .images {
            grid-template-columns: 1fr !important;
        }
    }
}

.profileBox {
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 40px;

    h1 {
        line-height: 1.2;
        font-family: 'Playfair Display';
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 20px;
        margin-bottom: 90px;
        font-weight: 200;
        font-size: 42px;
    }

    .detailsBox {
        margin: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .introImage {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 40px;
            margin-bottom: 40px;
        }

        img {
            width: 100%;
            max-width: 360px;
        }


        .messagesBox {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            span {
                margin-bottom: 20px;
                font-size: 11px;
                line-height: 1.4;
                font-family: Montserrat;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 2px;
            }
        }


    }

    .work-intro {
        margin-top: 70px;
        margin-bottom: 70px;
    }

    .title-text span {
        display: block;
        /*设置为块级元素会独占一行形成上下居中的效果*/
        position: relative;
        /*定位横线（当横线的父元素）*/
        font-family: 'PT Serif';
        font-weight: 400;
        color: #2d2e33;
        text-transform: none;
        font-size: 36px;
        text-align: center;
    }

    .title-text span:before,
    .title-text span:after {
        content: '';
        position: absolute;
        /*定位背景横线的位置*/
        top: 50%;
        background: #e5e5e7;
        /*背景横线颜色*/
        width: 45%;
        /*单侧横线的长度*/
        height: 1px;
    }

    .title-text span:before {
        left: 0%;
    }

    .title-text span:after {
        right: 0%;
    }

    .images {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

        img {
            width: 100%;
        }
    }

}
</style>